<template>
  <div class="profile-page">
    <div class="user-info">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-md-10 offset-md-1">
            <img :src="user.image" class="user-img" />
            <h4>{{ user.username }}</h4>
            <p>{{ user.bio }}</p>
            <nuxt-link
              :to="{ name: 'settings' }"
              class="btn btn-sm btn-outline-secondary action-btn"
            >
              <i class="ion-gear-a"></i> Edit Profile Settings
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-md-10 offset-md-1">
          <div class="articles-toggle">
            <ul class="nav nav-pills outline-active">
              <li class="nav-item">
                <span
                  class="nav-link"
                  :class="{ active: tab === 'my_articles'}"
                  @click="getArticlesByTab('my_articles')"
                >My Articles</span>
              </li>
              <li class="nav-item">
                <span
                  class="nav-link"
                  :class="{ active: tab === 'favorited_articles'}"
                  @click="getArticlesByTab('favorited_articles')"
                >Favorited Articles</span>
              </li>
            </ul>
          </div>

          <div class="article-preview" v-for="article in articles" :key="article.slug">
            <div class="article-meta">
              <a href>
                <img :src="user.image" />
              </a>
              <div class="info">
                <a href class="author">{{ user.username }}</a>
                <span class="date">{{ article.createAt | date('MMM DD, YYYY') }}</span>
              </div>
              <button
                class="btn btn-outline-primary btn-sm pull-xs-right"
                :class="{ active: article.favorited }"
                @click="onFavorite(article)"
                :disabled="article.favoriteDisabled"
              >
                <i class="ion-heart"></i>
                {{ article.favoritesCount }}
              </button>
            </div>
            <nuxt-link class="preview-link" :to="{ name: 'article', params: { slug: article.slug } }">
              <h1>{{ article.title }}</h1>
              <p>{{ article.description }}</p>
              <span>Read more...</span>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getArticles, addFavorite, deleteFavorite } from "@/api/article";

export default {
  name: "ProfileIndex",
  middleware: "authenticated",
  computed: {
    ...mapState(["user"]),
  },
  data() {
    return {
      tab: "my_articles",
      articles: [],
    };
  },
  mounted() {
    this.getArticlesByTab("my_articles");
  },
  methods: {
    async getArticlesByTab(tab) {
      this.tab = tab;
      const queryParam = tab === "my_articles" ? "author" : "favorited";
      const { data } = await getArticles({ [queryParam]: this.user.username });
      this.articles = data.articles;
      this.articles.forEach((article) => (article.favoriteDisabled = false));
    },
    async onFavorite(article) {
      article.favoriteDisabled = true;

      if (article.favorited) {
        await deleteFavorite(article.slug);
        article.favorited = false;
        article.favoritesCount += -1;
      } else {
        await addFavorite(article.slug);
        article.favorited = true;
        article.favoritesCount += 1;
      }

      article.favoriteDisabled = false;
    },
  },
};
</script>

<style>
</style>